<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
</style>
<template>
    <Table
            ref="selection"

            :columns="columns"
            :data="list"

    ></Table>
<!--    <div>
        <Row class="expand-row">
            <i-col span="8">
            <span class="expand-key">Job: </span>
            <span class="expand-value">{{ row.job }}</span>
            </i-col>
            <i-col span="8">
            <span class="expand-key">Interest: </span>
            <span class="expand-value">{{ row.interest }}</span>
            </i-col>
            <i-col span="8">
            <span class="expand-key">Birthday: </span>
            <span class="expand-value">{{ row.birthday }}</span>
            </i-col>
        </Row>
        <Row>
            <i-col span="8">
            <span class="expand-key">Favorite book: </span>
            <span class="expand-value">《{{ row.book }}》</span>
            </i-col>
            <i-col span="8">
            <span class="expand-key">Favorite movie: </span>
            <span class="expand-value">{{ row.movie }}</span>
            </i-col>
            <i-col span="8">
            <span class="expand-key">Favorite music: </span>
            <span class="expand-value">{{ row.music }}</span>
            </i-col>
        </Row>
    </div>-->
</template>
<script>
    import Cookies from 'js-cookie';
    import Util from '../../../libs/util';
    export default {
        props: {
            row: Object
        },
        data () {
            return {
                columns: [
                    {
                        title: '规格ID',
                        key: 'spec_id'
                    },
                    {
                        title: '规格详情',
                        key: 'spec_name_full',
                    },
                    {
                        title: '单价',
                        key: 'unit_money'
                    },
                    {
                        title: '实体店库存',
                        key: 'shop_spec_stock'
                    },
                    {
                        title: '实体店销量',
                        key: 'shop_sale_num'
                    },
                    {
                        title: '赠送积分',
                        key: 'point'
                    },
                    {
                        title: '是否上架',
                        key: 'is_show',
                        render: (h, params) => {
                            const color = params.row.is_show==0? 'red': 'green';
                            const text = params.row.is_show==0? '下架': '上架';
                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '是否默认',
                        key: 'is_default',
                        render: (h, params) => {
                            const color = params.row.is_default==0? 'red': 'green';
                            const text = params.row.is_default==0? '否': '是';
                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            const text = params.row.is_show==0? '上架': '下架';
                            if (this.admin_type == 1) {
                                return;
                            }
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                }, [
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '确定要' + text + '吗！',
                                            size: 'small'
                                        },
                                        on: {
                                            'on-ok': () => {
                                                this.handleSpecShow(params.row.spec_id, params.row.is_show,params.index);
                                            }
                                        }
                                    }, text)
                                ])
                            ]);
                        }
                    }
                ],
                list: this.row.product_specs,
                admin_type: Cookies.get('admin_type')
            };
        },
        methods: {
            handleSpecShow (spec_id, is_show, index) {
                let _this = this;
                let show = is_show == 1? 0: 1;
                Util.ajax.post(`/adminapi/product/shopspecshow`, {spec_id: spec_id, is_show: show}).then(response => {
                    if(response.data.code == 0) {
                        this.$Message.success('操作成功');
                        _this.list[index].is_show = show;
                    }else {
                        this.$Message.error(response.data.msg);
                    }
                });
            },
        }
    };
</script>
